<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link href="/static/css/layui.css" rel="stylesheet" />
		<link rel="stylesheet" href="/static/css/common.css" />
	</head>
	<body class="container">
		
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="role-table" lay-filter="role-table"></table>
			</div>
		</div>
		
		<script type="text/html" id="role-toolbar">
			<button class="layui-btn layui-btn-primary layui-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
		</script>
		
		<script type="text/html" id="role-bar">
			<button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
			
			<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>
		
		<script type="text/html" id="role-enable">
			<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="role-enable"  {{ d.status== 0 ? 'checked' : '' }} />
		</script>
		
		<script src="/static/js/layui.js"></script>
		<script>
			layui.extend({
				api: '{/}/static/js/api' // 开头特定符 {/} 即代表采用单独路径
			});
		    layui.use(['api'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
				let api = layui.api;
		
		        let MODULE_PATH = "./";
		
		        let cols = [
		            [
		                {title: 'ID', field: 'id'},
		                {title: '角色名', field: 'name', align:'center', width:100},
		                {title: '描述', field: 'remark', align:'center'},
		                {title: '是否可用', field: 'status', align:'center', templet:'#role-enable'},
		                {title: '操作', toolbar: '#role-bar', align:'center', width:195}
		            ]
		        ]
		
		        table.render({
		            elem: '#role-table',
		            url: api.apiUrl + 'auth/list',
					headers : api.getHeader(),
		            page: true ,
		            cols: cols ,
		            skin: 'line',
		            toolbar: '#role-toolbar',
					parseData: function(res) {
						//console.log(res)
						return {
							"code": res.code, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.data.count, //解析数据长度
							"data": res.data.list //解析数据列表
						};
					},
		            defaultToolbar: [{
						title: '刷新',
		                layEvent: 'refresh',
		                icon: 'layui-icon-refresh',
		            }, 'filter', 'print', 'exports']
		        });
		
		        table.on('tool(role-table)', function(obj){
		            if(obj.event === 'remove'){
		                window.remove(obj);
		            } else if(obj.event === 'edit'){
		                window.edit(obj);
		            }
		        });
		
		        table.on('toolbar(role-table)', function(obj){
		            if(obj.event === 'add'){
		                window.add();
		            } else if(obj.event === 'refresh'){
		                window.refresh();
		            }
		        });
		
		        form.on('submit(role-query)', function(data){
		            table.reload('role-table',{where:data.field})
		            return false;
		        });
		
		        //form.on('switch(role-enable)', function(obj){
		            //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

		        //});
				form.on('switch(role-enable)', function (data) {
					let v = 1;
					if (data.elem.checked) v = 0;
					let postData = {
						id : data.value,
						status : v
					};
					api.post('auth/enable', postData, res => {
						//console.log(res)
					},err => {
						$(data.elem).prop('checked', false);
						form.render('checkbox');
					})
				});
		        window.add = function(){
		            layer.open({
		                type: 2,
		                title: '新增',
		                offset: 'rt',
						area: ['80%', '100%'],
						anim: 1,
						maxmin: true,
		                content: MODULE_PATH + 'add.html'
		            });
		        }
		
		    
		
		        window.edit = function(obj){
		            layer.open({
		                type: 2,
		                title: '修改',
		                offset: 'rt',
						area: ['80%', '100%'],
						anim: 1,
						maxmin: true,
		                content: MODULE_PATH + 'edit.html?id=' + obj.data.id
		            });
		        }
		
		        window.remove = function(obj){
		            layer.confirm('确定要删除该角色', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
		                api.post('auth/del',{id : obj.data.id}, res => {
							layer.msg('删除成功',{icon:1,time:1000},() => {
								obj.del();
							});
						}, err => {
							//layer.msg('删除失败',{icon:2,time:1000});
						})
		            });
		        }
		        window.refresh = function(){
		            table.reload('role-table');
		        }
		    })
		</script>
	</body>
</html>
